<template>
  <div class="menu-container" :class="{ 'menu-collapsed': isCollapse }">
    <el-menu
      :default-active="activeIndex"
      class="side-menu"
      :collapse="isCollapse"
      @select="handleSelect"
      router
    >
      <el-menu-item @click="toggleCollapse">
        <el-icon :class="{ 'rotate-icon': !isCollapse }">
          <ArrowLeft />
        </el-icon>
        <template #title>
          <span v-if="!isCollapse">Collapse</span>
          <span v-else>Expand</span>
        </template>
      </el-menu-item>

      <el-menu-item index="/">
        <el-icon><HomeFilled /></el-icon>
        <template #title>首页</template>
      </el-menu-item>

      <!-- <el-menu-item index="/elog">
        <el-icon><Monitor /></el-icon>
        <template #title>日志控制台</template>
      </el-menu-item> -->

      <!-- <el-sub-menu index="2">
        <template #title>
          <el-icon><User /></el-icon>
          <span>角色系统</span>
        </template> -->
        <!-- <el-menu-item index="/erole">角色</el-menu-item>
        <el-menu-item index="/erole/json">角色JSON视图</el-menu-item> -->
        <!-- <el-menu-item index="/rexec">远程执行</el-menu-item>
      </el-sub-menu> -->

      <el-menu-item index="/script_search">
        <el-icon><Search /></el-icon>
        <template #title>脚本搜索</template>
      </el-menu-item>


      <el-menu-item index="/combat_conf_formatter">
        <img src="../assets/braces-fill.svg" style="width: 1.2em; height: 1.2em; margin-right: 5px; vertical-align: middle;" />
        <template #title>脚本格式化</template>
      </el-menu-item>

      <el-menu-item index="/misc_cfg">
        <el-icon><Document /></el-icon>
        <template #title>杂项数据</template>
      </el-menu-item>

      <el-menu-item index="/table_editor">
        <el-icon><Grid /></el-icon>
        <template #title>脚本表格-测试</template>
      </el-menu-item>

      <el-menu-item index="/table_visualable">
        <el-icon><Grid /></el-icon>
        <template #title>战斗配置可视化</template>
      </el-menu-item>

      <el-menu-item index="/xml_change_visual">
        <el-icon><Grid /></el-icon>
        <template #title>xml修改可视化</template>
      </el-menu-item>

      <el-menu-item index="/calendar_schedule">
        <el-icon><Calendar /></el-icon>
        <template #title>赛事日历</template>
      </el-menu-item>

      <el-menu-item index="/ai_exec_print">
        <el-icon><Monitor /></el-icon>
        <template #title>AI执行打印</template>
      </el-menu-item>

      <el-menu-item index="/camp_show">
        <el-icon><Calendar /></el-icon>
        <template #title>活动Camp可视化</template>
      </el-menu-item>

      <el-menu-item index="/system_documentation">
        <el-icon><Document /></el-icon>
        <template #title>系统说明文档</template>
      </el-menu-item>

      <!-- <el-sub-menu index="3">
        <template #title>
          <el-icon><Document /></el-icon>
          <span>脚本系统</span>
        </template>
        <el-menu-item index="/format_script">脚本格式化</el-menu-item>
        <el-menu-item index="/brackets_highlight">括号高亮</el-menu-item>
        <el-menu-item index="/script_search">脚本搜索</el-menu-item>
      </el-sub-menu> -->

      <!-- <el-menu-item index="/box_chess">
        <el-icon><Platform /></el-icon>
        <template #title>五子棋</template>
      </el-menu-item> -->

      <!-- <el-menu-item index="/momo_search">
        <el-icon><Search /></el-icon>
        <template #title>MOMO搜索</template>
      </el-menu-item> -->
    </el-menu>
  </div>
</template>

  <script setup lang="ts">
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import {
    HomeFilled,
    Search,
    ArrowLeft,
    Grid,
    InfoFilled,
    Document,
    Calendar,
    Monitor
  } from '@element-plus/icons-vue'

  const route = useRoute()
  const activeIndex = ref(route.path)
  const isCollapse = ref(false)

  const handleSelect = (key: string) => {
    activeIndex.value = key
  }

  const toggleCollapse = () => {
    isCollapse.value = !isCollapse.value
  }
  </script>

  <style scoped>
  .menu-container {
    position: relative;
    height: 100vh;
    display: flex;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--el-menu-bg-color);
    overflow: hidden;
  }

  .menu-container.menu-collapsed {
    width: 64px;
  }

  .menu-container:not(.menu-collapsed) {
    width: 200px;
  }

  .side-menu {
    height: 100vh;
    width: 100%;
    border-right: solid 1px var(--el-menu-border-color);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  :deep(.el-menu) {
    border-right: none;
  }

  :deep(.el-menu--collapse) {
    width: 64px;
  }

  :deep(.el-menu:not(.el-menu--collapse)) {
    width: 200px;
  }

  :deep(.el-menu-item) {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  :deep(.el-menu-item span) {
    transition: opacity 0.3s ease;
  }

  :deep(.el-icon) {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
  }

  .rotate-icon {
    transform: rotate(180deg);
  }

  /* 子菜单项动画 */
  :deep(.el-menu-item),
  :deep(.el-sub-menu__title) {
    position: relative;
    overflow: hidden;
  }

  :deep(.el-menu-item)::before,
  :deep(.el-sub-menu__title)::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--el-color-primary);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  :deep(.el-menu-item):hover::before,
  :deep(.el-sub-menu__title):hover::before,
  :deep(.el-menu-item.is-active)::before {
    transform: translateX(0);
  }

  /* 展开/收起时的过渡效果 */
  :deep(.el-sub-menu__title) {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 悬停和选中效果增强 */
  :deep(.el-menu-item):hover,
  :deep(.el-sub-menu__title):hover,
  :deep(.el-menu-item.is-active) {
    background: linear-gradient(90deg,
      var(--el-menu-hover-bg-color) 0%,
      var(--el-menu-bg-color) 100%
    );
  }

  /* 选中项的特殊效果 */
  :deep(.el-menu-item.is-active) {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  :deep(.el-menu-item.is-active)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--el-color-primary);
    transform: scaleY(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
  }

  :deep(.el-menu-item.is-active):hover::after {
    transform: scaleY(1);
  }

  /* 子菜单展开时的过渡效果 */
  :deep(.el-sub-menu__content) {
    transition: opacity 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  :deep(.el-menu--popup) {
    min-width: 200px;
  }
  </style>
